<template>
  <div class="student-subject">
    <div class="title">
      <div class="block"></div>
      <div class="word">
        国内学校和专业列表
      </div>
      <div class="button">
        <el-button class="el-button"
                   @click="refresh">刷新</el-button>
      </div>
    </div>
    <div>
      <search :formInline="formInline"
              @getSearchList="getSearchList">
        <div class="search-form">
          <el-form :rules="rules"
                   ref="formInline"
                   :inline="true"
                   :model="formInline"
                   class="demo-form-inline">
            <el-form-item class="el-form-item"
                          label="学校 :"
                          prop="schoolName">
              <el-input class="el-input"
                        v-model.trim="formInline.schoolName"
                        placeholder="编号/专业名"></el-input>
            </el-form-item>
            <el-form-item label="专业 :">
              <el-input class="el-input"
                        v-model.trim="formInline.name"
                        placeholder="专业名称">
              </el-input>
            </el-form-item>
          </el-form>
        </div>
      </search>
    </div>
    <div>
      <datashow>
        <template v-slot:form>
          <el-table class="el-table"
                    ref="multipleTable"
                    :data="tableData"
                    border
                    style="width: 100%">
            <el-table-column type="selection"></el-table-column>
            <el-table-column prop="schoolId"
                             label="编号"> </el-table-column>
            <el-table-column prop="school"
                             label="所属学校"> </el-table-column>
            <el-table-column prop="majorCName"
                             label="专业名称"> </el-table-column>
            <el-table-column prop="operation"
                             label="操作">
              <template slot-scope="scope">
                <el-button @click="goSchoolEdit(scope.row)"
                           type="text"
                           size="small">编辑学校</el-button>
                <el-button type="text"
                           size="small"
                           @click="goSubjectEdit(scope.row)">编辑专业</el-button>
                <el-button type="text"
                           size="small"
                           @click="deleteSchool(scope.row)">删除学校</el-button>
                <el-dialog title="提示"
                           :visible.sync="deleteSchoolDialogVisible"
                           width="30%"
                           center>
                  <div style="text-align:center">
                    <span>是否确认删除学校中文名称为{{ schoolCName }}的学校</span>
                  </div>
                  <span slot="footer"
                        class="dialog-footer">
                    <el-button class="el-button"
                               @click="deleteSchoolDialogVisible = false">取 消</el-button>
                    <el-button class="el-button"
                               type="primary"
                               @click="goDeleteSchool(scope.row)">确 定</el-button>
                  </span>
                </el-dialog>
                <el-button type="text"
                           size="small"
                           @click="deleteMajor(scope.row)">删除专业</el-button>
                <el-dialog title="提示"
                           :visible.sync="deleteMajorDialogVisible"
                           width="30%"
                           center>
                  <div style="text-align:center">
                    <span>是否确认删除专业中文名称为{{ majorCName }}的专业</span>
                  </div>
                  <span slot="footer"
                        class="dialog-footer">
                    <el-button class="el-button"
                               @click="deleteMajorDialogVisible = false">取 消</el-button>
                    <el-button class="el-button"
                               type="primary"
                               @click="goDeleteMajor()">确 定</el-button>
                  </span>
                </el-dialog>
              </template>
            </el-table-column>
          </el-table>
          <div class="bottom">
            <!-- <el-checkbox class="el-checkbox"
                         @change="toggleSelect(tableData)">全选</el-checkbox>
            <el-button class="el-button">批量操作</el-button>
            <el-button class="el-button">确定</el-button> -->
            <paging class="paging"
                    :total="total"
                    @size="size"
                    @currentpage="currentpage"></paging>
          </div>
        </template>
      </datashow>
    </div>
    <div>
      <footerinfo></footerinfo>
    </div>
  </div>
</template>

<script>
import search from '../../../component/search/search.vue'
import datashow from '../../../component/datashow/datashow.vue'
import paging from '../../../component/paging/paging.vue'
import footerinfo from '../../../component/footer/footer.vue'
import { getAllMajor, getlikeMajor,deleteSchool,deleteMajor } from '../../../api/index'

export default {
  inject: ['reload'],
  name: 'student-subject',
  components: {
    search, //筛选查询组件
    datashow, //数据列表组件
    paging, //分页组件
    footerinfo, //页脚组件
  },

  data () {
    return {
      current: '',
      pagesize: '',
      total: 0,//一共多少条数据
      value1: true,
      value2: true,
      allSelect: false,
      schoolId: '',
      schoolCName: '',
      mid: '',
      majorCName: '',
      deleteSchoolDialogVisible: false,
      deleteMajorDialogVisible: false,
      formInline: {
        schoolName: '', //学校名
        name: '', //专业名称
      },
      rules: {
        schoolName: [
          { required: true, message: '请输入学校名称', trigger: 'blur' },
          // { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
      },
      tableData: [],
    }
  },

  mounted () {
    this.$emit("routeName", "schoolSubject");
    this.getList()
  },

  methods: {
    currentpage (val) {
      // console.log(val);
      this.current = val //得到新的当前页
      this.getList() //获取新的数据列表
    },
    size (val) {
      // console.log(val);
      this.pagesize = val //得到新当前页的一共几行数据
      this.getList() //获取新的数据列表
    },
    getList () {
      getAllMajor(this.current, this.pagesize).then(data => {
        console.log(data.data);
        this.tableData = data.data.records
        this.total = data.data.total
      });
    },
    getSearchList (val) {
      if (this.formInline.schoolName) {
        this.current = '' //清空分页当前页数
        this.pagesize = ''//清空分页当前页的条数
        getlikeMajor(this.formInline.schoolName, this.formInline.name, this.current, this.pagesize).then(data => {
          console.log(data);
          this.tableData = data.data.records
          this.total = data.data.total
        });
      }
    },
    goSchoolEdit (val) {
      this.$router.push({
        name: "schoolEdit",
        params: {
          schoolId: val.schoolId
        },
      });
    },
    goSubjectEdit (val) {
      this.$router.push({
        name: "subjectEdit",
        params: {
          val: val
        },
      });
    },
    deleteSchool(val) {
      this.schoolCName = val.school
      this.schoolId = val.schoolId
      console.log(val.schoolId);
      this.deleteSchoolDialogVisible = true
    },
    goDeleteSchool() {
      this.deleteSchoolDialogVisible = false
      console.log(this.schoolId);
      deleteSchool(this.schoolId).then((data) => {
        console.log(data.data)
        this.getList()
      })
    },
    deleteMajor(val) {
      console.log(val.mid);
      this.majorCName = val.majorCName
      this.mid = val.mid
      this.deleteMajorDialogVisible = true
    },
    goDeleteMajor() {
      this.deleteMajorDialogVisible = false
      console.log(this.mid);
      deleteMajor(this.mid).then((data) => {
        console.log(data)
        this.getList()
      })
    },
    refresh () {
      this.reload()
    },
    toggleSelect (rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row, !this.allSelect)
        })
        this.allSelect = !this.allSelect
      }
    },
  },
}
</script>

<style scoped>
.title {
  position: relative;
  display: flex;
  width: 100%;
  height: 50px;
  border-bottom: 1px solid #e4e4e4;
  line-height: 50px;
  background-color: #f3f3f3;
}
.block {
  width: 5px;
  height: 30px;
  margin-top: 10px;
  margin-left: 5px;
  background-color: #1abc9c;
}
/* 标题文字 */
.word {
  width: 150px;
  margin-left: 5px;
  color: #999999;
}
.button {
  position: absolute;
  right: 30px;
}
.search-form {
  width: 100%;
  padding-top: 10px;
  padding-left: 10px;
}
/* 筛选查询 */
.demo-form-inline {
  width: 1500px;
}
.el-switch {
  width: 50px;
  height: 30px;
}
.bottom {
  display: flex;
  text-align: center;
  margin: 10px 10px;
}
.el-checkbox {
  margin-top: 10px;
}
.el-button {
  margin-left: 20px;
}
.paging {
  margin-left: 300px;
}
</style>
